<template>
  <view class="adress">
    <view class="a-list">
      <ljf-list-page style="height: 100%" :config="page.config" :empty-img-url="'empty/address.png'" :empty-tip="'暂无收货地址，请先添加'" ref="listPage">
        <template v-slot="{ listData }">
          <view class="l-item" v-for="item in listData" :key="item.id">
            <uni-swipe-action>
              <uni-swipe-action-item :right-options="options" @click="deleteAdrss(item.id)">
                <view class="i-name">
                  <view class="n-left">
                    <text>{{ getObjVal(item,'recipient') }}</text>
                    <text>{{ getObjVal(item,'mobile') }}</text>
                  </view>
                  <view class="n-right" @tap="nav(`/subpackage/user/pages/address/add?id=${item.id}`)">
                    编辑
                  </view>
                </view>
                <view class="i-adress">
                  {{getObjVal(item,'provinceName')}}{{getObjVal(item,'cityName')}}{{getObjVal(item,'districtName')}}{{getObjVal(item,'fullAddress')}}
                </view>
              </uni-swipe-action-item>
            </uni-swipe-action>
          </view>
          <view style="height:200rpx"></view>
        </template>
      </ljf-list-page>
    </view>
    <view class="a-footer">
      <view class="f-btn" @tap="nav('/subpackage/user/pages/address/add')">添加收货地址</view>
    </view>
  </view>
</template>

<script>
import { model } from '@/model';
const { Member } = model.collection;
export default {
  data () {
    return {
      options: [{
        text: "删除",
        style: {
          backgroundColor: "#fe004f"
        }
      }],
      page: {
        config: {
          entity: "Member",
          action: "addressPage",
          enablePull: true,
        }
      }
    }
  },
  methods: {
    deleteAdrss (id) {
      this.showModal('确认将地址删除?', '', '删除', () => {
        Member.sendApi("addressDelete", {
          params: {
            id
          },
          data: {},
        }).then((res) => {
          if (res.status) {
            this.toast('地址删除成功！');
            this.$refs.listPage.fresh();
          } else {
            this.toast('地址删除失败！');
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.adress {
  height: 100vh;
  background: #f7f7f7;

  .a-list {
    flex: 1;
    width: 100%;

    .l-item {
      margin-top: 30rpx;
      background: #fff;
      .i-name {
        .layout_flex(@j:space-between);
        padding: 30rpx;
        .n-left {
          text {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            &:nth-child(1) {
              margin-right: 46rpx;
            }
          }
        }
        .n-right {
          font-size: 24rpx;
          font-weight: 400;
          color: #666;
        }
      }
      .i-adress {
        display: -webkit-box;
        width: 668rpx;
        height: 90rpx;
        padding-left: 30rpx;
        margin-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        line-height: 44rpx;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .a-footer {
    position: fixed;
    bottom: 30rpx;
    .layout_flex(@j:center);
    z-index: 999;

    .f-btn {
      width: 690rpx;
      height: 90rpx;
      margin: 0 30rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      text-align: center;
      line-height: 90rpx;
      background: linear-gradient(-90deg, #ff3531, #ff7103);
      border-radius: 45rpx;
    }
  }
}
</style>
